<template>
	<view>
		<u-tabbar zIndex='10079' :border='false' :value="current?current:0" :fixed="true" :placeholder="true" activeColor="#E3432D"
			inactiveColor='#7A7A7A' :safeAreaInsetBottom="true" @change="handleTabClick">
			<u-tabbar-item v-for='(item,index) in tabList' :key="index" :badge='item.badge' :text="item.text">
				<image slot="inactive-icon" v-if="index!=2" class="u-page__item__slot-icon" :src="item.iconPath+'.png'"
					mode="heightFix">
				</image>
				<image slot="active-icon"  v-if="index!=2" class="u-page__item__slot-icon" :src="item.selectedIconPath+'.png'"
					mode="heightFix">
				</image>
				<image slot="inactive-icon" v-if="index==2" class="u-page__item__slot-icon__cneterbtn" :src="item.iconPath+'.png'"
					mode="heightFix">
				</image>
			</u-tabbar-item>
		</u-tabbar>
		<!-- 发布弹框 -->
		<u-popup mode="bottom" :show="show" @close="show=false" round="50rpx" bgColor='#f3f5f7'>
			<view class="popbox12312">
				<image src="/static/common/popbg.png" class="popbox12312__bg" mode=""></image>
				<view class="popbox12312__con">
					<view class="popbox12312__title">
						记录生命精彩时刻
					</view>
					<view class="popbox12312__tip">
						选择发布类型
					</view>
					<view class="u-flex u-flex-y-center u-flex-between">
						<image @click="navto(item.url)" :src="'/static/common/'+item.icon+'.png'" class="popbox12312__lx" v-for="(item,index) in lxlist" :key="index" mode=""></image>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props: {
			current: Number
		},
		data() {
			return {
				lxlist:[{
					icon:'tz',
					url:'/pages/post/releasepost'
				},{
					icon:'sp',
					url:'/pages/post/releasevideo'
				},{
					icon:'zb',
					url:'/pages/post/releasezb'
				}],
				show:false,
				tabList: [{
					text: '首页',
					iconPath: '/static/tabbar/home',
					selectedIconPath: '/static/tabbar/hometh',
					pagePath: '/pages/tabbar/home'
				}, {
					text: '种草',
					iconPath: '/static/tabbar/cao',
					selectedIconPath: '/static/tabbar/caoth',
					pagePath: '/pages/tabbar/cao'
				},
				{
					iconPath: '/static/tabbar/fabu',
				},
				{
					text: '任务',
					iconPath: '/static/tabbar/task',
					selectedIconPath: '/static/tabbar/taskth',
					pagePath: '/pages/tabbar/task'
				}, {
					text: '我的',
					iconPath: '/static/tabbar/my',
					selectedIconPath: '/static/tabbar/myth',
					pagePath: '/pages/tabbar/my'
				}, ]
			};
		},
		methods: {
			handleTabClick(index) {
				// 使用 uni.switchTab 方法切换页面
				// console.log(this.tabList[index].pagePath)
				if (index==2) {
					this.show=!this.show
				} else {
					this.show=false
					uni.switchTab({
						url: this.tabList[index].pagePath,
					});
				}
			},
		},
		watch: {

		}
	}
</script>

<style lang="scss">
	.u-page__item__slot-icon {
		height: 45rpx;
		&__cneterbtn{
			width: 149rpx;
			height: 148rpx;
			margin-bottom: 30rpx;
		}
	}
	.u-tabbar-item{
		position: relative;
	}
	.popbox12312{
		height: 478rpx;
		width: 750rpx;
		padding-bottom: calc(126rpx + env(safe-area-inset-bottom));
		position: relative;
		&__bg{
			height: 478rpx;
			width: 750rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		&__con{
			padding: 85rpx 35rpx 0;
			position: relative;
			
		}
		&__title{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 50rpx;
			color: #1E1E1E;
			line-height: 47rpx;
		}
		&__tip{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 31rpx;
			color: #797979;
			line-height: 31rpx;
			margin: 36rpx 0 42rpx;
		}
		&__lx{
			width: 220rpx;
			height: 191rpx;
		}
	}
</style>